<template>
	<view class="content">
		<uni-row class="demo-uni-row dark">
			<uni-col class="demo-uni-col" :span="10">
				<view class="demo-uni-col dark">
					<img style="height: 116px" src="static/logo.png" alt="" />
				</view>
			</uni-col>
			<uni-col class="demo-uni-col" :span="14">
				<uni-row class="demo-uni-row align-justify">
					<uni-col class="demo-uni-col">
						<view class="">
							<uni-data-select :localdata="langs" v-model="lang"></uni-data-select>
						</view>
						<view>
							<uni-easyinput v-model="inVal" class="uni-mt-5" :placeholder="titleDft"
								@iconClick="iconClick" :styles="{ borderColor: '#444', borderWidth: '2px' }"
								@confirm="foo"></uni-easyinput>
						</view>
					</uni-col>
					<uni-col class="demo-uni-col">
						<button type="submit" class="uni-btn uni-btn-small uni-btn-search" @tap="foo">
							<uni-icons type="search" size="22"></uni-icons><text class="search-text">查询</text>
						</button>
					</uni-col>

				</uni-row>
			</uni-col>
		</uni-row>
		<uni-row class="demo-uni-row">
			<uni-col class="demo-uni-col">
				<uni-section :title="item.title" type="line" v-for="(item,index) in sections" titleFontSize="18px">
					<uni-card is-full :is-shadow="true">
						<text class="uni-h6"> {{item.content}} </text>
					</uni-card>
				</uni-section>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	import {
		uniIcons
	} from "@dcloudio/uni-ui";
	import uniEasyinput from "components/uni-easyinput/uni-easyinput.vue";
	import uniDataSelect from "components/uni-data-select/uni-data-select.vue";
	export default {
		components: {
			uniEasyinput,
			uniDataSelect,
			uniIcons,
		},
		data() {
			return {
				lang: 1,
				inVal: "",
				titleDft: "beautiful",
				sections: [{
					title: "使命 Mission",
					content: ".."
				}, {
					title: "合作 Partnership",
					content: "..."
				}, {
					title: "投资者 Investor",
					content: "...."
				}]
			};
		},
		methods: {
			foo: function() {
				console.log(this.inVal);
				uni.navigateTo({
					url: 'step1?lang=' + this.lang + '&title=' + this.titleDft
				});
			},
		},
		onLoad() {
			// this.loadData()
		},
	};
</script>

<style>
	@import "./index.css";

	.demo-uni-row.align-justify {
		align-items: end;
	}

	.demo-uni-row {
		display: flex;
		align-items: center;
	}

	.show-img-col {
		width: 90%;
		margin: 0 auto;
		/* 水平居中 */
		overflow: hidden;
		/* 隐藏超出部分 */
		position: relative;
		max-width: 1024px;
		/* 图片宽度占满容器 */
	}

	img.show-img {
		height: 300px;
	}

	.uni-select {
		text-align: center;
		border-radius: 1px;
	}

	.search-text {
		color: aliceblue;
		font-size: 18px;
		line-height: 28px;
	}

	.uni-input-input {
		font-size: 18px;
	}
</style>